export const getCSSVariable = (name: TColorType | TColorTypeV2, prefix: string = '--color-'): string => {
  let body = window.getComputedStyle(document.body);
  return body.getPropertyValue(prefix + name).trim();
};

export type TColorType =
  | 'grey-1'
  | 'grey-2'
  | 'grey-3'
  | 'grey-4'
  | 'grey-5'
  | 'grey-6'
  | 'grey-7'
  | 'grey-8'
  | 'grey-9'
  | 'grey-10'
  | 'yellow-1'
  | 'yellow-2'
  | 'yellow-3'
  | 'yellow-4'
  | 'yellow-5'
  | 'yellow-6'
  | 'yellow-7'
  | 'blue-1'
  | 'blue-2'
  | 'blue-3'
  | 'blue-4'
  | 'blue-5'
  | 'blue-6'
  | 'blue-7'
  | 'red-1'
  | 'red-2'
  | 'red-3'
  | 'red-4'
  | 'red-5'
  | 'red-6'
  | 'prasinous-1'
  | 'prasinous-2'
  | 'prasinous-3'
  | 'prasinous-4'
  | 'prasinous-5'
  | 'prasinous-6'
  | 'indigo-1'
  | 'indigo-2'
  | 'indigo-3'
  | 'indigo-4'
  | 'indigo-5'
  | 'indigo-6'
  | 'c-1'
  | 'c-2'
  | 'c-3'
  | 'c-4'
  | 'green-9'
  | 'green-8'
  | 'green-7'
  | 'green-6'
  | 'green-5'
  | 'green-3'
  | 'green-4'
  | 'green-2'
  | 'green-1'
  | 'white'
  | 'white-004'
  | 'white-008'
  | 'white-012'
  | 'white-016'
  | 'white-024'
  | 'white-036'
  | 'black'
  | 'black-percent-4'
  | '$black-008'
  | 'black-012'
  | 'black-016'
  | 'black-024'
  | 'black-036';

type TColorTypeV2 =
  'brand-1' |
  'brand-2' |
  'brand-3' |
  'brand-4' |
  'brand-5' |
  'brand-6' |
  'brand-7' |
  'brand-8' |
  'brand-9' |
  'brand-10' |
  'text-1' |
  'text-2' |
  'text-3' |
  'text-4' |
  'text-5' |
  'line-1' |
  'line-2' |
  'line-3' |
  'line-4' |
  'fill-0' |
  'fill-1' |
  'fill-2' |
  'fill-3' |
  'fill-4' |
  'fill-5' |
  'fill-6' |
  'fill-7' |
  'danger-1' |
  'danger-2' |
  'danger-3' |
  'danger-4' |
  'danger-5' |
  'danger-6' |
  'danger-7' |
  'danger-8' |
  'danger-9' |
  'danger-10' |
  'blue-1' |
  'blue-2' |
  'blue-3' |
  'blue-4' |
  'blue-5' |
  'blue-6' |
  'blue-7' |
  'blue-8' |
  'blue-9' |
  'blue-10' |
  'mn-blue-1' |
  'mn-blue-2' |
  'mn-blue-3' |
  'mn-blue-4' |
  'mn-blue-5' |
  'mn-blue-6' |
  'mn-blue-7' |
  'mn-blue-8' |
  'mn-blue-9' |
  'mn-blue-10' |
  'warning-1' |
  'warning-2' |
  'warning-3' |
  'warning-4' |
  'warning-5' |
  'warning-6' |
  'warning-7' |
  'warning-8' |
  'warning-9' |
  'warning-10' |
  'green-1' |
  'green-2' |
  'green-3' |
  'green-4' |
  'green-5' |
  'green-6' |
  'green-7' |
  'green-8' |
  'green-9' |
  'green-10' |
  'lime-1' |
  'lime-2' |
  'lime-3' |
  'lime-4' |
  'lime-5' |
  'lime-6' |
  'lime-7' |
  'lime-8' |
  'lime-9' |
  'lime-10' |
  'yellow-1' |
  'yellow-2' |
  'yellow-3' |
  'yellow-4' |
  'yellow-5' |
  'yellow-6' |
  'yellow-7' |
  'yellow-8' |
  'yellow-9' |
  'yellow-10' |
  'gold-1' |
  'gold-2' |
  'gold-3' |
  'gold-4' |
  'gold-5' |
  'gold-6' |
  'gold-7' |
  'gold-8' |
  'gold-9' |
  'gold-10';

/**
 * 获取指定的css色值
 */
export const getCSSColor = (name: TColorType) => {
  return getCSSVariable(name);
};

export const getCSSColorV2 = (name: TColorTypeV2) => {
  return getCSSVariable(name);
};